<script lang="ts" setup>
defineOptions({
  name: 'HeadTip'
});
</script>

<template>
  <ACard title="座位管理" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }">
    <template #extra>
      <div style="display: flex; float: right; padding: 3px 0; align-items: center; transform: scale(0.7)">
        <div style="margin-left: 7px; margin-right: 1em">🪑 可选</div>
        <div style="margin-left: 7px; margin-right: 1em">🔒 有约</div>
        <div class="table"></div>
        <div style="margin-left: 7px">桌子</div>
      </div>
    </template>
  </ACard>
</template>

<style scoped>
.table {
  width: 18px;
  margin: 4px;
  height: 18px;
  border-radius: 2px;
  background: tan;
}
</style>
